<template>
    <div id="app" v-show="binData?.length >= 1 ? true : false">
        <div id="main" ref="main"></div>
    </div>
</template>

<script setup>

import { ref } from '@vue/reactivity';
import { onMounted, watch } from '@vue/runtime-core';
import * as echarts from 'echarts';

const props = defineProps(['binData']);

const main = ref()
onMounted(() => {
    watch(props, () => {
        setTimeout(() => {
            var chartDom = main.value;
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '热销产品',
                    textStyle: {
                        //文字颜色
                        color: 'gray',
                        //字体风格,'normal','italic','oblique'
                        fontStyle: 'normal',
                        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                        fontWeight: 'bold',
                        //字体系列
                        fontFamily: 'sans-serif',
                        //字体大小
                        fontSize: 12
                    }
                },
                aria: {
                    // 下面几行可以不写，因为 label.enabled 默认 true
                    label: {
                        enabled: true
                    },
                    enabled: true
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: 'rgba(228, 163, 126, 0.5)',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: props.binData
                    }
                ]
            };

            option && myChart.setOption(option);
        }, 500)
    })
})
</script>
 
<style lang="less" scoped>
#app {
    flex: 1;

    #main {
        padding: 20px 20px 0 20px;
        color: antiquewhite;
        border-radius: 10px;

        height: 55vh;
        background-color: rgba(255, 255, 255, 0.2);
        ;
        transition: all 1s;
        margin-right: 10px;

        &:hover {
            transform: scale(1.0001);
            box-shadow: 1px 1px 20px 5px rgba(84, 112, 198, 0.5);
        }
    }
}
</style>